<template>
  <el-descriptions
    :border="border"
    :column="col"
    :direction="direction"
    v-bind="elDescriptionProps"
    class="des-form"
  >
    <el-descriptions-item
      v-for="(item, key) in columns"
      :key="key"
      :label="`${item.label}${separator}`"
      v-bind="item.descriptionsItemProps || {}"
    >
      <span v-if="!item.slot">{{
        item.value
          ? item.value
          : (item.formatter
              ? item.formatter(data[item.prop], data)
              : data[item.prop]) || defaultValue
      }}</span>
      <slot v-else :name="item.slot"></slot>
    </el-descriptions-item>
  </el-descriptions>
</template>
<script setup>
const props = defineProps({
  border: {
    type: Boolean,
    default: true,
  },
  col: {
    type: Number,
    default: 4,
  },
  direction: {
    type: String,
    default: "horizontal",
  },
  elDescriptionProps: {
    type: Object,
    default: () => {
      return {};
    },
  },
  data: {
    type: Object,
    default: () => {
      return {};
    },
  },
  columns: {
    type: Array,
    default: () => {
      return [];
    },
  },
  defaultValue: {
    type: String,
    default: "暂无",
  },
  separator: {
    type: String,
    default: null,
  },
});
</script>
<style lang="scss" scoped>
.des-form {
  :deep(.el-select) {
      width: 100% !important;
  }
  :deep(.el-input) {
      width: 100% !important;
  } 
}
</style>